<template>
  <div>

    <van-tabs v-model="active" color="#1989fa">
      <van-tab title="国内新闻" class="news">
        <van-list>
          <van-cell class="title" @click="toDetail(news.nid)" v-for="news in national_news_list" :key="news.nid"
                    :title="news.title" :label="news.created_time"/>
        </van-list>
      </van-tab>
      <van-tab title="社区新闻" class="news">
        <van-list>
          <van-cell class="title" @click="toDetail(news.nid)" v-for="news in community_news_list" :key="news.nid"
                    :title="news.title" :label="news.created_time"/>
        </van-list>
      </van-tab>
    </van-tabs>


  </div>
</template>

<script>
import news from "./news.vue";

export default {
  name: "news",
  computed: {
    news() {
      return news
    }
  },
  data() {
    return {
      list: [],
      national_news_list: [],
      community_news_list: [],
      currentPage: 1,
      active: 0,
    }
  },
  methods: {
    getNews(type) {
      this.axios({
        method: "get",
        url: "/news/" + type + "/" + this.currentPage,
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            // 成功通知
            var newsList = resp.data.data.records
            for (var news of newsList) {
              var date = new Date(news.created_time);
              // news.created_time = createdTime.getMonth()+"-"+createdTime.getDay()
              news.created_time = (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes()
            }
            this[type+'_list'] = newsList
            // console.log(this[type+'_list'])
          }
        }
      })
    },

    toDetail(nid) {
      this.$router.push({name: 'article', params: {nid: nid}})
    },

  },
  created() {
    this.getNews("national_news")
    this.getNews("community_news")

  },
}
</script>

<style scoped>
.news {
  /*margin: 6px 3px;*/
  border: 2px solid #cecbcb;
  height: 290px;
  border-radius: 10px;
  overflow: auto;
}

.van-cell {
  /*padding: 8px 16px;*/

  border-top: 1px solid rgba(210, 212, 213, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.98);


}

.van-ellipsis {
  /*width: 80%;*/
}

.title {
  font-size: large;
}

.news_title {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 5%;
  font-size: large;
  font-weight: normal;

}

.van-cell__title {
  width: 75%;
}
</style>
